package myJs.cps.project

import myJs.Implicits._
import myJs.api.Api
import myJs.cps.BootstrapTableCp.Column
import myJs.cps._
import myJs.myPkg.jquery._
import myJs.myPkg.reactBootstrap._
import myJs.tool.Pojo.{CheckboxSearch, ExportData, NumericSearch, TextSearch}
import org.scalajs.dom.{document, window}
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import slinky.core.{FunctionalComponent, TagElement}
import slinky.core.annotations.react
import slinky.core.facade.Hooks.{useEffect, useState}
import slinky.core.facade.{Fragment, ReactElement}
import slinky.web.SyntheticMouseEvent
import slinky.web.html._
import typings.csstype.csstypeStrings
import upickle.default.{reader, writeJs}

import scala.collection.immutable.SeqMap
import scala.scalajs.js
import shared.VarTool
import myJs.myPkg.bootstrap.jquery._

/** Created by yz on 21/1/2022
  */
@react object CommonSingleCellCp {

  case class Props(
      geneName: String,
      geneNameChange: String => Unit,
      showLoading: Boolean = true,
      defaultAnchor: String = "sUMap"
  )

  val component = FunctionalComponent[Props] { props =>
    val (kindV, setKindV) = useState("All")
    val kinds = VarTool.kinds
    val initOptionMap = kinds.map { k =>
      val showText = k match {
        case "FibCs" => "Cirrhosis"
        case _ => k
      }
      (k, showText)
    }.toSeqMap
    val (optionMap, setOptionMap) = useState(initOptionMap)
    object FTool {
      def scrollToAnchor(anchorName: String) = (e: SyntheticMouseEvent[TagElement#RefType]) => {
        e.preventDefault()
        scrollExec(anchorName)
      }
      def scrollExec(anchorName: String) = {
        document.getElementById(anchorName).scrollIntoView()
      }
      def geneNameChange = (v: String) => {
        props.geneNameChange(v)
      }
      def kindVChange = (v: String) => {
        setKindV(v)
      }
    }

    useEffect(
      () => {
        $("#scrollContent").scrollspy(ScrollspyOptions(target = "#myScrollspy", offset = 1))
      },
      List()
    )
    useEffect(
      () => {
        FTool.scrollExec(props.defaultAnchor)
      },
      List()
    )
    val contentHeight = math.max(450, window.innerHeight.toInt - 300)

    Fragment(
      div(
        style := Style(flex = 3, width = "30%"),
        div(
          id := "myScrollspy",
          div(
            className := "bs-docs-sidebar affix-top",
            role := "complementary",
            ul(
              style := Style(width = 330),
              className := "nav bs-docs-sidenav",
              id := "myNav",
              li(
                style := Style(width = 330),
                form(
                  style := Style(),
                  id := "form",
                  div(
                    style := Style(marginRight = 15),
                    className := "form-group",
                    div(style := Style(), label(style := Style(), className := "control-label", "Gene Symbol")),
                    div(
                      style := Style(height = 34, display = csstypeStrings.flex, alignItems = csstypeStrings.center), {
                        val url = s"${Api.apiUrl}/gepLiver/analysis/getAllGene"
                        PureAsyncSelect2Cp(
                          width = "100%",
                          onChange = FTool.geneNameChange,
                          value = props.geneName,
                          url = url
                        )
                      }
                    )
                  ),
                  div(style := Style()),
                  div(
                    style := Style(marginRight = 15),
                    className := "form-group",
                    div(style := Style(), label(style := Style(), className := "control-label", "Select Phenotype")),
                    div(
                      style := Style(height = 34, display = csstypeStrings.flex, alignItems = csstypeStrings.center),
                      PureSelect2Cp(optionMap = optionMap, value = kindV, onChange = FTool.kindVChange, width = "100%")
                    )
                  )
                )
              ),
              label(style := Style(), className := "control-label", "Expression Profile"),
              li(
                style := Style(width = 330),
                className := "",
                a(href := s"#uMap", "UMAP Plot", onClick := FTool.scrollToAnchor("uMap"))
              ),
              li(
                style := Style(width = 330),
                className := "",
                a(href := "#dot", "Box Plot", onClick := FTool.scrollToAnchor("dot"))
              ),
              li(
                style := Style(width = 330),
                className := "",
                a(href := "#exp", "Expression Statistics", onClick := FTool.scrollToAnchor("exp"))
              ),
              label(style := Style(marginTop = 15), className := "control-label", "Single Cell Landscape"),
              li(
                style := Style(width = 330),
                className := "",
                a(href := s"#sUMap", "UMAP Plot", onClick := FTool.scrollToAnchor("sUMap"))
              ),
              li(
                style := Style(width = 330),
                className := "",
                a(href := "#sBar", "Bar Plot", onClick := FTool.scrollToAnchor("sBar"))
              ),
              li(
                style := Style(width = 330),
                className := "",
                a(href := "#sCell", "Cell Type", onClick := FTool.scrollToAnchor("sCell"))
              ),
              li(
                style := Style(width = 330),
                className := "",
                a(href := "#sFeature", "Feature Heatmap", onClick := FTool.scrollToAnchor("sFeature"))
              ),
              li(
                style := Style(width = 330),
                className := "",
                a(href := "#sMarker", "Marker List", onClick := FTool.scrollToAnchor("sMarker"))
              ),
              label(style := Style(marginTop = 15), className := "control-label", "Extensions"),
              li(
                style := Style(width = 330),
                className := "",
                a(
                  href := "#abundanceSc",
                  "Abundance Analysis-Single Cell",
                  onClick := FTool.scrollToAnchor("abundanceSc")
                )
              ),
              li(
                style := Style(width = 330),
                className := "",
                a(href := "#abundanceBulk", "Abundance Analysis-Bulk", onClick := FTool.scrollToAnchor("abundanceBulk"))
              ),
              li(
                style := Style(width = 330),
                className := "",
                a(href := "#communication", "Cell Communication", onClick := FTool.scrollToAnchor("communication"))
              )
            )
          )
        )
      ),
      div(
        style := Style(
          flex = 7,
          paddingLeft = 15,
          maxHeight = contentHeight,
          height = contentHeight,
          overflowY = csstypeStrings.auto,
          position = csstypeStrings.relative,
          paddingRight = 15
        ),
        id := "scrollContent",
        h4(style := Style(marginBottom = 15), "Expression Profile", id := "uMap"),
        FeaturePlotCp(geneName = props.geneName, kindV = kindV),
        hr(),
        BoxplotCp(geneName = props.geneName, kind = kindV, showLoading = props.showLoading),
        hr(),
        GeneExpCp(geneName = props.geneName, kind = kindV),
        hr(),
        h4(style := Style(marginBottom = 15), id := "sUMap", "Single Cell Landscape"),
        ScatterCp(kind = kindV),
        hr(),
        BarCp(kindV = kindV),
        hr(),
        CellTypeCp(kind = kindV),
        hr(),
        FeatureCp(),
        hr(),
        MarkerCp(showLoading = props.showLoading),
        hr(),
        AbundanceScCp(),
        hr(),
        AbundanceBulkCp(),
        hr(),
        CommunicationCp(kind = kindV)
      )
    )

  }

}
